<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>芯佑电商_产品详情</title>
    <#include "/website/commonWebsite.html">
    <!--==网站图标==-->
    <!--<link rel="shortcut icon" type="image/x-icon" href="images/Favorites.ico" media="screen">
    &lt;!&ndash;==引入jQuery==&ndash;&gt;
    <script src="js/jquery-3.0.0.js"></script>
    &lt;!&ndash;==样式文件==&ndash;&gt;
    <link href="css/share.css" rel="stylesheet" type="text/css">
    <link href="css/home.css" rel="stylesheet" type="text/css">
    <link href="css/shopping.css" rel="stylesheet" type="text/css">
    <link href="css/me.css" rel="stylesheet" type="text/css">
    <link href="css/login.css" rel="stylesheet" type="text/css">-->
</head>
<body>
<!--==头部==-->
<#include "/website/header.html">
<!--==内容区域==-->
<div class="home_n">
    <div  class="home_nr">

        <!--==导航==-->
        <div class="prodet-dh">
            <a href="/website/home">首页</a>
            <strong>/</strong>
            <a href="/website/productList?productTypeFirst=${product.product_type_first}&page=1&limit=28">${product.firstCategory}</a>
            <strong>/</strong>
            <a href="/website/productList?productTypeSecond=${product.product_type_second}&page=1&limit=28">${product.secondCategory}</a>
            <strong>/</strong>
            ${product.product_name}
        </div>

        <!--==头部==-->
        <div class="prodet-top">
            <!--==左侧==-->
            <div class="prodet-top-le">
                <#assign imgPaths=product.product_avatar?split(";")/>
                <div class="wai">
                    <div class="one">
                        <img src="//${imgPaths[0]}"/>
                        <span></span>
                    </div>
                    <div class="two">
                        <#list imgPaths as item>
                        <!--<img class="active" src="/website/images/enlarge_01.jpg" />-->
                            <img src="//${item}" />
                        </#list>
                    </div>
                </div>
                <#list imgPaths as item>
                    <div class="the">
                        <img src="//${item}" />
                    </div>
                </#list>
            </div>
            <!--==右侧==-->
            <div class="prodet-top-ri">
                <input type="hidden" id="skuPk" value="">
                <input type="hidden" id="productPk" value="${product.pk}">
                <div class="prodet-top-rit">
                    <h1>${product.product_name}</h1>
                    <p>商城价：<strong id="skuOffPrice" style="font-size: larger">请选择商品属性</strong></p>
                    <p>市场价：<del id="skuPrice">请选择商品属性</del></p>
                    <span style="font-size: 12px;color: sandybrown;">品牌：${product.no5}<span>&nbsp;&nbsp;
                    <span>最小包装：${product.no6}<span><br>
                    <span>仓库：${product.no7}<span>&nbsp;&nbsp;
                    <span>日期：${product.no8}<span>
                </div>
                <#if productAttrNameList?? && productAttrNameList?size &gt;0>
                    <#list productAttrNameList as item>
                        <div class="prodet-top-rix attr">
                            <h1 class="attrName">${item.attr_name}</h1>
                            <ul>
                                <!--<li><a href="#" class="hover">第一代</a></li>-->
                                <#if list[item_index]?? && list[item_index]?size &gt;0>
                                    <#list list[item_index] as lst>
                                        <li><a href="javascript:void(0);" onclick="changeSku(this)">${lst.attr_value}</a></li>
                                    </#list>
                                </#if>
                            </ul>
                        </div>
                    </#list>
                </#if>
                <div class="prodet-top-rix">
                    <h1>购买数量</h1>
                    <dl>
                        <dt><a href="javascript:void(0)" onclick="cut()"><img src="/website/images/home_14.png" alt=""></a></dt>
                        <dd><input type="text" value="0" id="productCount" onchange="productCount()"></dd>
                        <dt><a href="javascript:void(0)" onclick="add()"><img src="/website/images/home_15.png" alt=""></a></dt>
                    </dl>
                    <p id="stock">库存99999件</p>
                    <input id ="stockCounts" type="hidden" value="99999">
                </div>
                <div class="prodet-top-rin">
                    <span><button type="button" onclick="addShoppingCart(1)">添加购物车</button></span>
                    <p><button type="button" onclick="addShoppingCart(2)">立即购买</button></p>
                </div>

            </div>
        </div>

        <!--==内容==-->
        <div class="prodet-nr">
            <div class="tab_nr demo2">
                <!--切换标题-->
                <ul class="tab_menu">
                    <li class="current">产品详情</li>
                    <li>产品参数</li>
                </ul>
                <!--内容-->
                <div class="tab_box">
                    <!--详情-->
                    <div class="details">
                        <div class="details-tu">${product.product_desc}</div>
                    </div>
                    <!--参数-->
                    <div class="details">
                        <div class="details-tu">${product.no4}</div>
                    </div>
                </div>
            </div>
            <div class="tab-nr-ri">
                <!--标题-->
                <div class="home_list_bt">
                    <h1>推荐产品</h1>
                </div>
                <!--内容-->
                <div class="home_list_n">
                    <#if productList.list?? && productList.list?size &gt;0>
                        <#list productList.list as item>
                            <div class="home_list_nr">
                                <#assign imgPaths=item.product_avatar?split(";")>
                                    <h1><a href="/website/productDetails?productPk=${item.pk}"><img src="//${imgPaths[0]}" width="275" height="275"></a></h1>
                                <#if item.is_new==1>
                                    <h2><img src="/website/images/home_11.png"></h2>
                                <#elseif item.is_new==2>
                                    <h2><img src="/website/images/home_12.png"></h2>
                                </#if>
                                <dl>
                                    <dt><a href="/website/productDetails?productPk=${item.pk}">${item.product_name} ${item.product_title}</a></dt>
                                    <#if item.product_sale??&&item.product_sale!="">
                                        <dd>${item.product_sale}<del>${item.product_price}</del></dd>
                                    <#else>
                                        <dd>${item.product_price}</dd>
                                    </#if>
                                </dl>
                            </div>
                        </#list>
                    </#if>
                </div>
            </div>
        </div>

    </div>
</div>

<!--==版权==-->
<#include "/website/copyright.html">

<!--==返回头部==-->
<script type="text/javascript" src="/website/js/backtop.js"></script>

<!--==Tab==-->
<script src="/website/js/tab/jquery.tabs.js"></script>
<script src="/website/js/tab/jquery.lazyload.js"></script>
<script src="/website/js/tab/tab.js"></script>
<!--==图片放大==-->
<script src="/website/js/enlarge/enlarge.js"></script>
<script type="text/javascript">
    //用于点击显示图片
    var imagePaths='${product.product_avatar}'.split(";");

    $(function(){
        var attrName = $(".attrName");
        if(attrName.length==0){
            $("#skuPk").val("-1");
            $("#skuPrice").html("￥"+"${product.product_price}");
            $("#skuOffPrice").html("￥"+"${product.product_sale}");
        }
    })
    //点击sku属性显示篮筐价格
    function changeSku(value){
        $(value).parent().parent().find("a").removeClass("hover");
        $(value).addClass("hover");
        var attrValueAccount = $(".attr .hover");
        if(attrValueAccount.length==$(".attr").length){
            var skuName="";
            var productPk="${product.pk}";
            for (var i = 0; i <attrValueAccount.length; i++) {
                skuName+=$(attrValueAccount[i]).text();
                if(i!=attrValueAccount.length-1){
                    skuName+=";";
                }
            }
            console.log(skuName)
            $.ajax({
                url:"/website/skuList",
                data:{'skuName':skuName.trim(),'productPk':productPk},
                dataType:"json",
                type:"get",
                success:function(resp){
                    $("#skuPk").val(resp.data[0].pk);
                    $("#skuPrice").html("￥"+resp.data[0].sku_price);
                    $("#skuOffPrice").html("￥"+resp.data[0].sku_off_price);
                    $("#stock").text("库存"+resp.data[0].sku_num+"件");
                },
                error:function(){
                    layer.msg("未知错误")
                }
            })
        }
    }

    //用于点击增加数量
    function add(){
        var productCount = $("#productCount").val();
        var stock = $("#stock").text()//库存
        stock=stock.substring(stock.indexOf("存")+1,stock.indexOf("件"));
        console.log(stock);
        if(parseInt(stock)<1){
            $("#productCount").val(stock);
        }else{
            productCount = parseInt(productCount)+1;
            $("#productCount").val(productCount);
            stock=parseInt(stock)-1;
            $("#stock").text("库存"+stock+"件")
        }
    }
    //用于点击减少数量
    function cut(){
        var productCount=$("#productCount").val();
        var stock = $("#stock").text()//库存
        stock=stock.substring(stock.indexOf("存")+1,stock.indexOf("件"));
        if(productCount<1){
            $("#productCount").val(0);
        }else{
            stock = parseInt(stock)+1;
            productCount=parseInt(productCount)-1;
            $("#stock").text("库存"+stock+"件");
            $("#productCount").val(productCount);
        }

    }
    //数量是负数的都变为0大于库存的都变为库存
    function productCount(){
        var productCount=$("#productCount").val();
        var stockCounts=$("#stockCounts").val();//库存
        var stock = $("#stock").text()//库存
        stock=stock.substring(stock.indexOf("存")+1,stock.indexOf("件"));
        console.log(stock)
        if(productCount==""||parseInt(productCount)<0){
            $("#productCount").val(0);
        }
        productCount=$("#productCount").val();
        if(parseInt(productCount)>parseInt(stock)){
            $("#productCount").val(stock);
        }else{
            stock = parseInt(stockCounts)-parseInt(productCount);
            $("#stock").text("库存"+stock+"件")
        }

    }

    //添加到购物车
    function addShoppingCart(num){
        var user = "${user}";
        if(user==null||user==''||user==undefined){
            location.href="/website/login";
        }
        $.ajax({
            url:'/website/shoppingCart/addAndEdit',
            data:{'productSkuPk':$("#skuPk").val(),'productSkuCount':$("#productCount").val(),'no1':$("#productPk").val()},
            type:'post',
            success:function(resp){
                if(num==1){
                    layer.msg(resp.message);
                    getCounts();
                }else{
                    if($("#skuPk").val()==''||$("#productPk").val()==''){
                        layer.msg("请选择商品属性")
                        return
                    }
                    if($("#productCount").val()=='0'){
                        layer.msg("请选择商品数量");
                        return;
                    }
                    location.href="/website/shoppingCart/shopping_list?shoppingCartPk="+resp.data;
                }
            },
            error:function(){
                layer.msg("系统错误")
            }
        })
    }
</script>
</body>
</html>